<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幼儿生词学习</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>幼儿生词学习</h1>
        </header>

        <main class="main-content">
            <!-- 学习展示区域 -->
            <section class="learning-section" id="learningSection">
                <div class="word-display" id="wordDisplay">
                    <div class="chinese-word" id="chineseWord"></div>
                    <div class="color-selector" id="colorSelector">
                        <div class="color-card active" style="background-color: var(--secondary-color-1);" data-color="var(--secondary-color-1)"></div>
                        <div class="color-card" style="background-color: #FF6B6B;" data-color="#FF6B6B"></div>
                        <div class="color-card" style="background-color: #4ECDC4;" data-color="#4ECDC4"></div>
                        <div class="color-card" style="background-color: #FFD93D;" data-color="#FFD93D"></div>
                        <div class="color-card" style="background-color: #6A0572;" data-color="#6A0572"></div>
                    </div>
                    <div class="pinyin-container">
                        <div class="pinyin" id="pinyin"></div>
                        <button class="btn audio-btn" id="audioBtn" title="播放发音">🔊</button>
                    </div>
                </div>
                
                <div class="progress" id="progress"></div>
                
                <div class="controls">
                    <button class="btn prev-btn" id="prevBtn">上一个</button>
                    <button class="btn next-btn" id="nextBtn">下一个</button>
                
                </div>
                <div>
                    <button class="btn shuffle-btn" id="shuffleBtn">重新排序</button>
                </div>
            </section>

            <!-- 空状态提示 -->
            <section class="empty-state" id="emptyState">
                <div class="empty-icon">📚</div>
                <p>还没有添加生词</p>
                <button class="btn add-first-btn" id="addFirstBtn">点击添加生词开始学习</button>
            </section>

            <!-- 添加生词表单 -->
            <section class="add-section">
                <form id="addWordForm">
                    <div class="form-group">
                        <input type="text" id="chineseInput" placeholder="请输入汉字(1-2个字符)，多个词汇用空格或逗号分隔" maxlength="100" required>
                        <button type="submit" class="btn add-btn">添加生词</button>
                    </div>
                </form>
                <div class="default-vocab-section">
                    <button class="btn default-vocab-btn" id="loadDefaultVocab">加载默认生词库</button>
                    <button class="btn clear-all-btn" id="clearAllVocab">清空所有生词</button>
                </div>
            </section>

            <!-- 生词列表 -->
            <section class="word-list-section">
                <h2>生词列表</h2>
                <div class="word-list" id="wordList"></div>
            </section>
        </main>
    </div>

    <!-- 拼音编辑模态框 -->
    <div class="modal" id="pinyinModal">
        <div class="modal-content">
            <span class="close" id="closeModal">&times;</span>
            <h2>修改拼音</h2>
            <div class="modal-body">
                <div class="word-preview">
                    <div class="chinese-preview" id="chinesePreview"></div>
                </div>
                <div class="form-group">
                    <label for="pinyinInput">拼音:</label>
                    <input type="text" id="pinyinInput" placeholder="请输入正确的拼音">
                </div>
                <div class="modal-buttons">
                    <button class="btn cancel-btn" id="cancelPinyin">取消</button>
                    <button class="btn save-btn" id="savePinyin">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/pinyin-pro@3.18.3/dist/index.js"></script>
    <script src="script.js"></script>
</body>
</html>